import cache from '@/utils/cache'
export const iconDrag = {
    mounted(el,binding){
        let x = 0;
        let y = 0;
        let l = 0;
        let t = 0;
        let isDown = false;
        let overlap = false
        let elArray = document.querySelectorAll('.inline-icon')
        //鼠标按下事件
        el.onmousedown = function(e) {
            console.log(el);
            //获取鼠标位置的x坐标和y坐标
            x = e.clientX;
            y = e.clientY;

            //获取选中元素左部和顶部的偏移量
            l = el.offsetLeft - 10;
            t = el.offsetTop - 10;
            //开关打开
            isDown = true;
            //设置样式
            //   el.style.cursor = "move";
            el.style.zIndex = 1990
        
            document.addEventListener("mousemove",move)
            document.addEventListener("mouseup",up)
            console.log(binding);
            //鼠标移动事件
            function move(e) {
                if (isDown == false) {
                    return;
                }
                //获取鼠标每次移动的x和y坐标
                let nx = e.clientX;
                let ny = e.clientY;
                //计算移动后的左偏移量和顶部的偏移量
                let nl = nx - (x - l);
                let nt = ny - (y - t);


                //边界处理：20是margin值
                if(nl<=0){
                    el.style.left = 0+'px'
                }else{
                    if(nl + el.offsetWidth>=document.body.offsetWidth){
                        el.style.left = document.body.offsetWidth - el.offsetWidth - 20 +'px';
                    }else{
                        el.style.left = nl + 'px';
                    }
                }
                if(nt<=0){
                    el.style.top = 0+'px'; 
                }else{
                    let workHeight = document.body.offsetHeight - document.querySelector('.bottom-nav').offsetHeight
                    if(nt + el.offsetHeight>=workHeight){
                        el.style.top = workHeight - el.offsetHeight - 20 + 'px';
                    }else{
                        el.style.top = nt + 'px';
                    }
                    
                }

            }
        
            //鼠标抬起事件
            function up() {
                //开关关闭
                isDown = false;
                // el.style.cursor = "pointer";
                el.style.zIndex = 2
                document.removeEventListener("mousemove",move)
                document.removeEventListener("mouseup",up)
                for (let i = 0; i < elArray.length; ++i) {
                    if(el!==elArray[i]){
                        let l1 = el.offsetLeft;
                        let r1 = el.offsetLeft + el.offsetWidth;
                        let t1 = el.offsetTop;
                        let b1 = el.offsetTop + el.offsetHeight;
                
                        let l2 = elArray[i].offsetLeft;
                        let r2 = elArray[i].offsetLeft + elArray[i].offsetWidth;
                        let t2 = elArray[i].offsetTop;
                        let b2 = elArray[i].offsetTop + elArray[i].offsetHeight;
                        // 碰撞检测的规则
                        if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {
                            // 如果没有碰到
                            // overlap = null
                            el.style.cursor = "pointer"
                
                        } else {
                            // 如果碰到了
                            el.style.cursor = "not-allowed"
                            overlap = true
                        }
                    }
                }
                if(overlap){
                    //如果碰撞则回到原来的位置
                    el.style.cursor = "pointer"
                    el.style.left = l + 'px'
                    el.style.top = t + 'px'
                    overlap=false
                    
                 }else{
                    //如果没有碰撞且位置距离没有放对，则根据中心点坐标判断自动拖拽到最近的位置
                    el.style.cursor = "pointer"
                    let tempLeft = el.offsetLeft/el.offsetWidth
                    let tempTop = el.offsetTop/el.offsetHeight
                    let round = Math.round(tempLeft)
                    let round1 = Math.round(tempTop)
                   
                    if(round>tempLeft){
                        let left = el.offsetLeft+(round-tempLeft)*el.offsetWidth
                        if(left+el.offsetWidth>=document.body.offsetWidth){
                            el.style.left = left - (left + el.offsetWidth - document.body.offsetWidth) - 20 + 'px'
                            savePos(el.getAttribute('appid'),el.offsetLeft,el.offsetTop)
                        }else{
                            el.style.left = left - 20 + 'px'
                            savePos(el.getAttribute('appid'),el.offsetLeft,el.offsetTop)
                        }
                       
                    }else if(round<tempLeft){
                        el.style.left = el.offsetLeft-(tempLeft-round)*el.offsetWidth + 'px'
                        savePos(el.getAttribute('appid'),el.offsetLeft,el.offsetTop)
                    }else{
                        el.style.left = el.offsetLeft + 'px'
                        savePos(el.getAttribute('appid'),el.offsetLeft,el.offsetTop)
                    }
 
                    if(round1>tempTop){
                        el.style.top = el.offsetTop+(round1-tempTop)*el.offsetHeight + 'px'
                        savePos(el.getAttribute('appid'),el.offsetLeft,el.offsetTop)
                    }else if(round1<tempTop){
                        el.style.top = el.offsetTop-(tempTop-round1)*el.offsetHeight + 'px'
                        savePos(el.getAttribute('appid'),el.offsetLeft,el.offsetTop)
                    }else{
                        el.style.top = el.offsetTop + 'px'
                        savePos(el.getAttribute('appid'),el.offsetLeft,el.offsetTop)
                    }
                }
            }

            function savePos(id,x,y){
                // console.log(binding.instance);
                let timer = null
                let app = JSON.parse(cache.app.get())
                binding.instance.dataSource.forEach(item => {
                    if(item.id===id){
                        item.position['x']=x-10
                        item.position['y']=y-10
                    }
                });
                if(timer){
                    clearTimeout(timer)
                }
                timer=setTimeout(() => {
                    app.forEach(item => {
                        if(item.id===id){
                            item.position['x']=x-10
                            item.position['y']=y-10
                        }
                    });
                    cache.app.set(app)
                }, 1000);
          
                
            }
        };

   
    }
}

export const windowDrag = {
    mounted(el){
        let x = 0;
        let y = 0;
        let l = 0;
        let t = 0;
        let isDown = false;
        const minWidth = 500
        const minHeight = 400
        let isMove = true
        //鼠标按下事件
        
        el.onmousedown = function(e) {
            console.log(el);
            //获取鼠标位置的x坐标和y坐标
            x = e.pageX;
            y = e.pageY;

            //获取选中元素左部和顶部的偏移量
            l = el.parentNode.offsetLeft;
            t = el.parentNode.offsetTop;
            //开关打开
            isDown = true;
            //设置样式
            //   el.style.cursor = "move";
            el.parentNode.style.zIndex = 2001

            if(el.getAttribute('data-flag')==='0'){
                el.children[1].onmousedown =function(e) {
                    e.stopPropagation();
                }
        
                el.children[0].children[0].children[1].onmousedown = function(e) {
                    e.stopPropagation();
                }
                el.children[0].children[1].children[0].onmousedown = function(e) {
                    e.stopPropagation();
                }
            }else{
                el.children[0].children[1].onmousedown = function(e) {
                    e.stopPropagation();
                }
            }
            document.addEventListener("mousemove",move)
            document.addEventListener("mouseup",up)
            //鼠标移动事件
            function move(e) {
                if (isDown == false) {
                    return;
                }
                if(el.parentNode.offsetWidth>=document.body.offsetWidth&&el.parentNode.offsetHeight>=document.body.offsetHeight-80)
                {
                    if(x!==e.pageX||y!==e.pageY){
                        el.parentNode.style.width = document.body.offsetWidth-100+'px'
                        el.parentNode.style.height = document.body.offsetHeight-100 + 'px'
                        console.log(123134142);
                    }
                    
                }
               
                //获取鼠标每次移动的x和y坐标
                let nx = e.pageX;
                let ny = e.pageY;
                //计算移动后的左偏移量和顶部的偏移量
                let nl = nx - (x - l);
                let nt = ny - (y - t);
                el.parentNode.style.left = nl + 'px';
                el.parentNode.style.top = nt + 'px';


            }
        
            //鼠标抬起事件
            function up() {
                //开关关闭
                isDown = false;
                // el.style.cursor = "pointer";
                el.parentNode.style.zIndex = 10
                document.removeEventListener("mousemove",move)
                document.removeEventListener("mouseup",up)
            }
        };
        
        


            el.parentNode.onmousemove = function(e) {
                if 
                (
                e.pageX > el.parentNode.offsetLeft + el.parentNode.offsetWidth - 10 ||
                el.parentNode.offsetLeft + 10 > e.pageX
                ) {
                el.parentNode.style.cursor = 'w-resize'
                } 
                else if 
                ( 
                el.parentNode.scrollTop + e.pageY >
                el.parentNode.offsetTop + el.parentNode.offsetHeight - 10 ||
                el.parentNode.offsetTop + 10 > e.pageY
                ) 
                {
                el.parentNode.style.cursor = 's-resize'
                } 
                else 
                {
                el.parentNode.style.cursor = 'default'
                el.parentNode.onmousedown = null
                }

            el.parentNode.onmousedown = e => {
                const pageX = e.pageX
                const pageY = e.pageY
                const elW = el.parentNode.offsetWidth
                const elH = el.parentNode.offsetHeight
                const EloffsetLeft = el.parentNode.offsetLeft
                const EloffsetTop = el.parentNode.offsetTop
                // el.parentNode.style.userSelect = 'none'
                const ELscrollTop = el.parentNode.scrollTop

                let elArray = Array.from(el.nextElementSibling.children)
                elArray.forEach(element => {
                    element.children[1].style.display = 'block'
                });
            

                  document.onmousemove = function(e) {
                    // 移动时禁用默认事件
                    e.preventDefault()
                    // 左侧鼠标拖拽位置
                    if (pageX > EloffsetLeft && pageX < EloffsetLeft + 10) {
                      // 往左拖拽
                      if (pageX > e.pageX) {
                        el.parentNode.style.width = elW + (pageX - e.pageX)  + 'px'
                        el.parentNode.style.left = EloffsetLeft - (pageX - e.pageX)  + 'px'
                      }
                      // 往右拖拽
                      if (pageX < e.pageX) {
                        if (el.parentNode.offsetWidth < minWidth) {
                        } else {
                            el.parentNode.style.width = elW - (e.pageX - pageX)  + 'px'
                            el.parentNode.style.left = EloffsetLeft + (e.pageX - pageX)  + 'px'
                        }
                      }
                    }
                    // 右侧鼠标拖拽位置
                    if (
                      pageX > EloffsetLeft + elW - 10 &&
                      pageX < EloffsetLeft + elW
                    ) {
                      // 往左拖拽
                      if (pageX > e.pageX) {
                        if (el.parentNode.offsetWidth < minWidth) {
                        } else {
                            el.parentNode.style.width = elW - (pageX - e.pageX) + 'px'
                        }
                      }
                      // 往右拖拽
                      if (pageX < e.pageX) {
                        el.parentNode.style.width = elW + (e.pageX - pageX) + 'px'
                      }
                    }

                    // 底部鼠标拖拽位置
                    if (
                      ELscrollTop + pageY > EloffsetTop + elH - 20 &&
                      ELscrollTop + pageY < EloffsetTop + elH
                    ) {
                      // 往上拖拽
                      if (pageY > e.pageY) {
                        if (el.parentNode.offsetHeight < minHeight) {
                          console.log()
                        } else {
                            el.parentNode.style.height = elH - (pageY - e.pageY)  + 'px'
                        }
                      }
                      // 往下拖拽
                      if (pageY < e.pageY) {
                        el.parentNode.style.height = elH + (e.pageY - pageY) + 'px'
                      }

                    }
                    // 顶部鼠标拖拽位置
                    if (
                        pageY > EloffsetTop &&
                        pageY < EloffsetTop + 10
                    ) {
                    // 往下拖拽
                    if (pageY < e.pageY) {
                        if (el.parentNode.offsetHeight < minHeight) {
                        console.log()
                        } else {
                            isDown = false
                            el.parentNode.style.height = elH - (e.pageY - pageY)  + 'px'
                            el.parentNode.style.top = EloffsetTop + (e.pageY - pageY)  + 'px'
                        }
                    }
                    // 往上拖拽
                    if (pageY > e.pageY) {
                        isDown = false
                        el.parentNode.style.height = elH + (pageY - e.pageY) + 'px'
                        el.parentNode.style.top = EloffsetTop - (pageY - e.pageY)  + 'px'
                    }

                    }

                    
                }
            
                    // 拉伸结束
                document.onmouseup = function(e) {
                    document.onmousemove = null
                    document.onmouseup = null
                    isDown = true
                    let elArray = Array.from(el.nextElementSibling.children)
                    elArray.forEach(element => {
                        element.children[1].style.display = 'none'
                    });
                }

        }
    }

   
    }
}
